// pages/signature/signature.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    title: '客户签名',
    context: null,
    index: 0,
    height: 0,
    width: 0,
  },
  /**记录开始点 */
  bindtouchstart: function(e) {
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
  },
  /**记录移动点，刷新绘制 */
  bindtouchmove: function(e) {
    this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
    this.data.context.stroke();
    this.data.context.draw(true);
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
  },

  /**清空画布 */
  clear: function() {
    this.data.context.clearRect(0, 0, this.data.width, this.data.height);
    this.data.context.draw();
    this.data.context.setStrokeStyle('#fff')
    this.data.context.setLineWidth(2)
    this.data.context.setFontSize(20)
    let str = "";
    this.data.context.fillText(str, Math.ceil((this.data.width - this.data.context.measureText(str).width) / 2), Math.ceil(this.data.height / 2) - 20)
    this.data.context.setFillStyle('#151634'); //填充背景色
    this.data.context.fillRect(0, 0, this.data.width, this.data.height); //画出背景色矩形
    this.data.context.restore()
    this.data.context.draw()
  },
  /**导出图片 */
  submit: function() {
    const that = this;
    this.data.context.draw(false, wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.data.width,
      height: that.data.height,
      destWidth: that.data.width,
      destHeight: that.data.height,
      fileType: 'jpg',
      canvasId: 'firstCanvas',
      success(res) {
        console.log("图片临时路径", res.tempFilePath)
        var pages = getCurrentPages();
        let prevPage = pages[pages.length - 2];
        prevPage.setData({
          signatureTempPath: res.tempFilePath
        })
        //获取base64
        wx.getFileSystemManager().readFile({
          filePath: res.tempFilePath,
          encoding: 'base64',
          success: function(res) {
            console.log('base64', res.data)
            prevPage.setData({
              signatureBase64: res.data
            })
            wx.navigateBack()
          }
        })
      },
      fail() {
        wx.showToast({
          title: '提交失败',
          icon: 'none',
          duration: 2000
        })
      }
    }))

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    let query = wx.createSelectorQuery();
    const that = this;
    query.select('#firstCanvas').boundingClientRect();
    query.exec(function(rect) {
      let width = rect[0].width;
      let height = rect[0].height;
      that.setData({
        width,
        height
      });
      const context = wx.createCanvasContext('firstCanvas')
      that.setData({
        context: context
      })
      context.setStrokeStyle('#fff')
      context.setLineWidth(2)
      context.setFontSize(20)
      // context.save()
      context.setFillStyle('#151634'); //填充背景色
      context.fillRect(0, 0, width, height); //画出背景色矩形
      context.restore()
      let str = "";
      context.fillText(str, width, height)
      context.draw()
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})